<template>
  <div class="wrapper">
        <ul>
        <router-link
        tag="li"
        :to="'/shopDetails/' + item.store_id"
        v-for="(item, index) in list"
        :key="index" :id="item.store_id" class="clearfix"
        >
            <img onerror="this.src='../../../assets/img/news.png'" v-lazy="imgs(item.store_images.split(',')[0])" />
            <div class="news_li_center">
                <div class="news_title">{{item.store_title}}</div>
                <div class="news_li_left zi_26 hui_6">
                    <div>行业: <span class="hei_zi">{{item.store_category}}-{{item.categoryclass}}</span></div>
                    <div>区域：<span class="hei_zi">{{item.store_quyu}}</span></div>
                    <div>建筑面积：<span class="hong_zi jiacu">{{item.store_area}}㎡</span></div>
                </div>
                <div class="see">查看</div>
            </div>
        </router-link>
      </ul>
  </div>
</template>

<script>
export default {
  name: 'CompanyList',
  props: {
    list: Array
  },
  methods: {
    imgs (img) {
      let newStr = img.indexOf('http')
      if (newStr !== 0) {
        return this.baseUrl + img
      } else {
        return img
      }
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
.wrapper
    padding 0 .4rem /* 20/50 */
    ul
        width 100%
        li
            width 100%
            border-bottom 1px solid rgba(0,0,0,.1)
            padding .3rem /* 15/50 */ 0
            display flex
            img
                width 34% /* 127/50 */
                height 1.9rem /* 95/50 */
                object-fit cover
                border-radius 5px
            div.news_li_center
                width 66%
                padding-left .26rem /* 13/50 */
                position relative
                .news_title
                    width 100%
                    font-size .32rem /* 16/50 */
                    margin-bottom .2rem /* 10/50 */
                    font-weight bold
                    text-overflow -o-ellipsis-lastline
                    overflow hidden
                    text-overflow ellipsis
                    display -webkit-box
                    -webkit-line-clamp 1
                    line-clamp 1
                    -webkit-box-orient vertical
                .see
                    position absolute
                    right 0px
                    bottom 0px
                    width 1.12rem /* 56/50 */
                    height .5rem /* 25/50 */
                    line-height .5rem /* 25/50 */
                    color #6B6C6D
                    border-radius .26rem /* 13/50 */
                    border 1px solid #999999
                    text-align center
                    box-sizing border-box
</style>
